<template>
  <div>
    <el-button
      type="danger"
      plain
      icon="delete"
      @click="dialogVisible = true"
      :disabled="selection.length === 0"
    >
      删除
    </el-button>
    <el-dialog
      title="删除文件"
      v-model="dialogVisible"
      width="61%"
      style="border-radius: 10px; padding: 5px 10px"
    >
      <h3 style="margin-bottom: 20px">你将删除以下文件</h3>
      <el-table :data="selection" :row-key="(row) => row.id" border>
        <el-table-column prop="id" label="编号" width="250" align="center" />

        <el-table-column prop="fileName" label="文件名" align="center" />

        <el-table-column
          prop="uploadTime"
          label="上传时间"
          width="200"
          align="center"
        />
      </el-table>
      <div class="footer">
        <el-button type="primary" @click="submit()">提交</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { deletePdf } from '@/service/api/pdf';
import eventBus from '@/utils/event-bus';

const dialogVisible = ref(false);

const props = defineProps({
  selection: {
    type: Array,
    default: () => [],
  },
});

//提交
const submit = async () => {
  const ids = [];
  for (const item of props.selection) {
    ids.push(item.id);
  }
  await deletePdf(ids);
  dialogVisible.value = false;
  eventBus.emit('getPdfList');
};
</script>
<style lang="scss">
.footer {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>
